import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { LoginWrapper, LoginBox, Input, Button } from './style'

class Register extends PureComponent {
  render() {
    return (
      <LoginWrapper>
        <LoginBox>
          <Input placeholder='账号' ref={(input) => { this.account = input }} />
          <Input placeholder='密码' type='password' ref={(input) => { this.password = input }} />
          <Input placeholder='确认密码' type='password' ref={(input) => { this.password = input }} />
          <Button onClick={() => this.props.register(this.account, this.password)}>注册</Button>
        </LoginBox>
      </LoginWrapper>
    )
  }
}

const mapDispatch = (dispatch) => ({
  register(accountElem, passwordElem) {
    dispatch(actionCreators.register(accountElem.value, passwordElem.value))
  }
})

export default connect(null, mapDispatch)(Register);